import { memo } from "react";
import { Handle, NodeProps, Position } from "reactflow";
import { TData } from "./interface";

const CustomNode = ({ data, id }: NodeProps<TData>) => {
  const { leftObj, topObj, rightObj, bottomObj } = data;
  return (
    <>
      {leftObj?.show && (
        <Handle id={"left-" + id} type={leftObj?.type ?? "source"} position={Position.Left} isConnectable={false} />
      )}
      {topObj?.show && (
        <Handle id={"top-" + id} type={topObj?.type ?? "source"} position={Position.Top} isConnectable={false} />
      )}
      {data?.label}
      {rightObj?.show && (
        <Handle id={"right-" + id} type={rightObj?.type ?? "source"} position={Position.Right} isConnectable={false} />
      )}
      {bottomObj?.show && (
        <Handle
          id={"bottom-" + id}
          type={bottomObj?.type ?? "source"}
          position={Position.Bottom}
          isConnectable={false}
        />
      )}
    </>
  );
};

export default memo(CustomNode);
